<template>
  <div class="main_left column-flex">
    <!--  上  -->
    <div class="box module-top">
      <!-- 标题 -->
      <h1 class="left-title">安全保密事件统计</h1>
      <div class="container">
        <div class="container-title">
          <span class="con-title-border"></span>
          <div class="con-title-tit">事件总数</div>
          <div class="con-title-count">{{ eventCountData.count }}</div>
          <div class="con-title-ring">
            环比
            <span
              :class="
                eventCountData.ringComparison >= 0 ? 'color-red' : 'color-green'
              "
              ><i
                :class="
                  eventCountData.ringComparison >= 0
                    ? 'el-icon-top'
                    : 'el-icon-bottom'
                "
              ></i
              >{{ eventCountData.ringComparison }}%</span
            >
          </div>
        </div>
        <pieEcharts
          ref="pieEchartRef"
          style="height: 72%"
          @mouseover="handleMouseover"
          @mouseleave="handleMouseLeave"
          @handlePieClick="handlePieClick"
        ></pieEcharts>
        <div>
          <el-button
            :class="[activeIndex == 0 ? 'active' : '']"
            size="mini"
            @click="handleGetData(0)"
            >保密监管视角</el-button
          >
          <el-button
            :class="[activeIndex == 1 ? 'active' : '']"
            size="mini"
            @click="handleGetData(1)"
            >分级保护视角</el-button
          >
        </div>
      </div>
    </div>
    <!--  中  -->
    <div class="box module-middle">
      <h1 class="left-title">违规人员排名</h1>
      <div
        class="flex"
        style="
          margin-top: 0.8rem;
          width: 100%;
          height: calc(100% - 3.2rem);
          overflow: hidden;
        "
      >
        <CycleComponent
          v-if="isAnimate && rankingData.length"
          :time="rankingData.length < 6 ? 0 : 8"
          :paused="rankingData.length < 6"
          style="width: 100%"
        >
          <ranking
            style="width: 100%"
            class="left-content"
            :total="total"
            :data="rankingData"
          ></ranking>
        </CycleComponent>
        <div v-else style="width: 100%; text-align: center">暂无数据</div>
      </div>
    </div>
    <!--  下  -->
    <div class="box module-bottom">
      <h1 class="left-title" style="margin-bottom: 0.2rem">异常设备TOP5</h1>
      <div class="flex" style="height: calc(100% - 3rem); overflow: hidden">
        <AbnormalEquipment
          style="width: 100%"
          v-if="abnormalEquipmentData.length > 0"
          :data="
            abnormalEquipmentData.length < 5
              ? abnormalEquipmentData
              : abnormalEquipmentData.slice(0, 5)
          "
        ></AbnormalEquipment>
        <div v-else style="width: 100%; text-align: center">暂无数据</div>
      </div>
    </div>
    <searchDialog
      ref="safeConcernsDialogRef"
      title="事件列表"
      :searchFormObj="imgFormObj"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      :operate-open="true"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
  </div>
</template>

<script>
import imgList from "@/components/common/ImgList.vue";
import ImgMiddle from "@/components/common/ImgMiddle.vue";
import pieEcharts from "@/components/echarts/confidentialitySupervision/pieEcharts";
import ranking from "@/components/common/Ranking";
import CycleComponent from "@/components/common/cycleComponent.vue";
import AbnormalEquipment from "@/components/common/AbnormalEquipment";
import { abnormalAssets, abnormalUser } from "@/api/comprehensiveSituation.js";
import { eventCount, eventList } from "@/api/confidentialitySupervision.js";
import { mapState } from "vuex";
import searchDialog from "@/components/common/searchDialog";
import obj from "@/components/index/comprehensiveSituation/components/tableData/index.js";
import { cloneDeep } from "@/utils/loadash-es";
import { parseTime } from "@/utils/hongke";

export default {
  components: {
    imgList,
    ImgMiddle,
    pieEcharts,
    ranking,
    CycleComponent,
    AbnormalEquipment,
    searchDialog,
  },
  data() {
    return {
      timeOut: undefined,
      total: 0,
      activeIndex: 0,
      isAnimate: false,
      eventCountData: {
        count: 0,
        ringComparison: 0,
        eventCount: {
          // 保密监管视角
          eventTypeCounts: [],
          // 分级保护视角
          protectCounts: [],
        },
      },
      //  违规人员排名
      rankingData: [],
      // 异常设备top5
      abnormalEquipmentData: [
        {
          title: "自监管服务器1",
          ip: "101.10.23.122",
          name: "张三",
          typeName: "终端/涉密专用计算机机密",
          type: "机密",
          count: "200",
        },
        {
          title: "自监管服务器1",
          ip: "101.10.23.122",
          name: "张三",
          typeName: "终端/涉密专用计算机机密",
          type: "机密",
          count: "200",
        },
        {
          title: "自监管服务器1",
          ip: "101.10.23.122",
          name: "张三",
          typeName: "终端/涉密专用计算机机密",
          type: "机密",
          count: "200",
        },
        {
          title: "自监管服务器1",
          ip: "101.10.23.122",
          name: "张三",
          typeName: "终端/涉密专用计算机机密",
          type: "机密",
          count: "200",
        },
        {
          title: "自监管服务器1",
          ip: "101.10.23.122",
          name: "张三",
          typeName: "终端/涉密专用计算机机密",
          type: "机密",
          count: "200",
        },
      ],
      imgItems: [
        { title: "交换路由设备", amount: 12, img: "img_router.png" },
        { title: "防火墙", amount: 2, img: "img_firewall.png" },
        { title: "安全防护设备", amount: 1, img: "img_safe.png" },
        { title: "动环设备", amount: 6, img: "img_internet.png" },
        { title: "其他设备", amount: 6, img: "img_outher.png" },
        { title: "未授权接入设备", amount: 6, img: "img_import.png" },
      ],
      safeOperationItems: [
        { title: "故障告警设备", amount: 12, img: "safeOperation_y.png" },
        { title: "高危告警设备", amount: 2, img: "safeOperation_o.png" },
        { title: "运行异常设备", amount: 1, img: "safeOperation_b.png" },
      ],
      config: {
        header: ["IP地址", "所属地区", "次数"],
        data: [
          ["192.11.101.2", "山东济南", "22"],
          ["192.101.11.100", "河北石家庄", "5"],
          ["192.10.102.3", "上海", "10"],
          ["192.10.12.131", "北京", "15"],
          ["192.10.122.13", "河南郑州", "10"],
          ["192.11.101.2", "山东济南", "22"],
          ["192.101.11.100", "河北石家庄", "5"],
          ["192.10.102.3", "上海", "10"],
          ["192.10.12.131", "北京", "15"],
          ["192.10.122.13", "河南郑州", "10"],
        ],
        headerBGC: "rgba(18,33,132,0.30)",
        evenRowBGC: "transparent",
        oddRowBGC: "rgba(18,33,132,0.20)",
        headerHeight: 36,
        rowNum: 4,
      },
      queryParams: {
        searchType: this.$store.state.searchType || "3",
      },
      imgFormObj: {
        fieldList: cloneDeep(obj.imgFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
          protectCodeList: this.$store.state.protectCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      event_total_timer: null,
    };
  },
  computed: {
    ...mapState([
      "levelCodeList",
      "typeCodeList",
      "categoryCodeList",
      "protectCodeList",
      "searchType",
      "time"
    ]),
  },
  watch: {
    time:{
      handler(val) {
        if(val && val[0]){
          this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null;
          if(this.$store.state.searchType!='custom'){
            this.queryParams.time=null
          }else{
            this.queryParams.time=this.$store.state.time
          }
        this.getAllData();
        }
      },
      immediate: true,
      deep: true,
    },
    levelCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.levelCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    typeCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.typeCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    categoryCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.categoryCodeList = val;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.dataLoop();
  },
  methods: {
    getAllData() {
      this.getAbnormalUser();
      this.getAbnormalAssets();
      this.getEventCount();
    },
    // 安全保密事件统计
    getEventCount() {
      eventCount(this.queryParams).then((res) => {
        this.eventCountData = res;
        if (this.eventCountData.eventCount.eventTypeCounts.length > 0) {
          this.eventCountData.eventCount.eventTypeCounts =
            this.eventCountData.eventCount.eventTypeCounts.map((i) => {
              return {
                name: i.name,
                value: i.count,
                code: i.code,
                groupCode: i.groupCode,
              };
            });
        }
        if (this.eventCountData.eventCount.protectCounts.length > 0) {
          this.eventCountData.eventCount.protectCounts =
            this.eventCountData.eventCount.protectCounts.map((i) => {
              return {
                name: i.name,
                value: i.count,
                code: i.code,
                groupCode: i.groupCode,
              };
            });
        }
        this.handleGetData(0);
      });
    },
    //  违规人员
    getAbnormalUser() {
      this.rankingData=[];
      abnormalUser(this.queryParams).then((res) => {
        if (res.length > 0) {
          res.forEach((i) => {
            this.total += i.eventTotal;
          });
        }
        if(res.length > 5){
          this.rankingData = res.slice(0,5);
        }else{
          this.rankingData = res;
        }
          this.timeOut = setTimeout(() => {
            this.isAnimate = true;
          }, 200);
      });
    },
    // 异常资产排名
    getAbnormalAssets() {
      abnormalAssets(this.queryParams).then((res) => {
        this.abnormalEquipmentData = res;
      });
    },
    // 切换按钮
    handleGetData(index) {
      if (index == 0) {
        this.activeIndex = 0;
        this.$refs.pieEchartRef.getData(
          this.eventCountData.eventCount.eventTypeCounts
        );
      } else {
        this.activeIndex = 1;
        this.$refs.pieEchartRef.getData(
          this.eventCountData.eventCount.protectCounts
        );
      }
    },
    // 点击饼状图的数据触发的事件
    handlePieClick(params) {
      let type =
        params.groupCode == "event_type"
          ? "typeCode"
          : params.groupCode == "protect_category"
          ? "protectCode"
          : "";
      this.queryEventList({ [type]: params.code, ...this.queryParams });
      this.imgFormObj.searchData = { [type]: params.code, ...this.queryParams };
      let _self = this;
      setTimeout(function () {
        _self.$refs.safeConcernsDialogRef.open = true;
      }, 500);
    },
    /** 网络安全重点关注项列表查询 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /**  搜索 */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
      }
      this.queryEventList(data);
    },
    /** 运维协同  --弹窗详情*/
    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val.row.id
      );
    },
    /** 循环 */
    dataLoop() {
      this.event_total_timer = setInterval(() => {
        if (this.activeIndex == 0) {
          this.handleGetData(1);
        } else {
          this.handleGetData(0);
        }
      }, 20000);
    },
    handleMouseover() {
      clearInterval(this.event_total_timer);
    },
    handleMouseLeave() {
      this.dataLoop();
    },
  },
  destroyed() {
    clearTimeout(this.timeOut);
    clearInterval(this.event_total_timer);
  },
};
</script>

<style lang="scss" scoped>
.box {
  // overflow: hidden;
}

.container {
  height: 90%;
  flex-wrap: wrap;
  padding: 0 1rem 1rem 1rem;

  .container-title {
    width: 100%;
    background: linear-gradient(to right, #1a3e9b, transparent);
    padding: 0.4rem;
    display: flex;
    align-items: center;

    .con-title-border {
      width: 0.2rem;
      height: 1.2rem;
      background: #01f1ff;
      display: inline-block;
      margin-right: 0.4rem;
    }

    .con-title-tit {
      flex: 2;
      text-align: left;
    }

    .con-title-count {
      flex: 1;
      font-size: 1.4rem;
      color: #01f1ff;
      font-weight: 900;
    }

    .con-title-ring {
      .color-red {
        color: #f01515;
      }
      .color-green {
        color: #00b62c;
      }
    }
  }
}

.module-top {
  height: 33% !important;
}

.module-middle {
  height: 31% !important;
}

.module-bottom {
  height: 32% !important;
}

::v-deep .el-button {
  background: rgba(59, 139, 255, 0.2);
  border: 1px solid rgba(59, 139, 255, 0.2);
  border-radius: 2px;
  color: #3e94fe;

  &:hover,
  &.active {
    background: rgba(0, 225, 228, 0.2) !important;
    border: 1px solid rgba(0, 225, 228, 0.6) !important;
    border-radius: 2px !important;
    color: #00e1e4 !important;
  }
}
</style>
